Vue 初级使用中的几个问题

本篇记录个人遇到的问题如下:

1. 路由变化页面数据不刷新问题
2. setTimeout/setInterval this指向改变，无法用this访问VUe实例
3. setInterval路由跳转继续运行并没有销毁
4. vue路由拦截浏览器后退实现草稿保存类似需求
5. v-once 只渲染元素和组件一次，优化更新渲染性能
6. vue框架风格指南推荐

路由变化页面数据不刷新问题

场景：比如文章详情数据，依赖路由的params参数获取的(ajax写在created生命周期里面)，因为路由懒加载的关系，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是上一个文章的数据。

解决方法：watch监听路由是否变化

 watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){//是否有文章id
      //获取文章数据
    }
  }
}

还有就是加key、多加一个重定向页面(elementadmin的思路)

setTimeout/setInterval this指向改变，无法用this访问VUe实例

场景：

  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此时this指向Window对象
        },1000);
    }

解决方法：使用箭头函数或者

    //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);

setInterval路由跳转继续运行并没有销毁

场景：

比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。

解决办法：在组件生命周期beforeDestroy停止setInterval

组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。

beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
},

vue路由拦截浏览器后退实现草稿保存类似需求

场景： 为了防止用户突然离开，没有保存已输入的信息。 用法：

//在路由组件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }

类似的还有beforeEach、beforeRouteUpdate，也分为全局钩子和组件钩子，见路由文档。

v-once 只渲染元素和组件一次，优化更新渲染性能

觉得v-once (opens new window)这个api蛮6的，应该很多小伙伴都没有注意到这个api。

这个api在我看来主要用于那些一次性渲染，并且不会再有操作更改这些渲染的值，这样就可以优化双向绑定的更新性能。

文档推荐： (opens new window)对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </div>\
  '
})

vue风格指南推荐：

写到这里想到vue框架还有一个风格指南推荐 (opens new window)